<template>
  <div class="article-item">
    <yk-space size="xl">
      <div class="article-item__cover">
        <yk-image :src="cover" width="160" height="120" :is-lazy="true" :preview="false" fit="cover"></yk-image>
        <p class="article-item__unpublish" v-if="props.data?.state === 0">未发布</p>
      </div>
      <div style="width: 100%;">
        <p class="article-item__title" v-html="title"></p>
        <p class="article-item__introduce" v-html="introduce"></p>
        <div class="article-item__datas">
          <yk-space size-xl>
            <yk-text type="secondary">
              {{ subsetStore.subsetName(props.data?.subset_id) }}
              <yk-text type="secondary" v-if="props.data!.label!.length > 0">
                /
                <span v-for="item in props.data?.label" :key="item" style="padding-right: 4px;">{{ item }}</span>
              </yk-text>
            </yk-text>
            <yk-text type="third">{{ moment(props.data?.moment!) }}</yk-text>
            <yk-space>
              <yk-text type="third">
                <IconEyeOutline></IconEyeOutline>
                {{ props.data?.views }}
              </yk-text>
              <yk-text type="third">
                <IconLikeOutline></IconLikeOutline>
                {{ props.data?.praise }}
              </yk-text>
              <yk-text type="third">
                <IconCommentOutline></IconCommentOutline>
                {{ props.data?.comment }}
              </yk-text>
            </yk-space>
          </yk-space>
          <yk-space class="article-item__control" size="xl">
            <yk-tooltip placement="top" title="发布" v-if="props.data?.state === 0">
              <IconSendOutline @click="updateState(1)"></IconSendOutline>
            </yk-tooltip>
            <yk-tooltip placement="top" title="撤回" v-if="props.data?.state === 1">
              <IconRevokeOutline @click="updateState(0)"></IconRevokeOutline>
            </yk-tooltip>
            <yk-tooltip placement="top" title="编辑">
              <IconFillOutline @click="updateArticle"></IconFillOutline>
            </yk-tooltip>
            <yk-popconfirm trigger="click" placement="topRight" title="确定删除" content="你确定要删除这篇文章吗？"
              @confirm="deleteArticle">
              <IconDeleteOutline />
            </yk-popconfirm>
          </yk-space>
        </div>
      </div>
    </yk-space>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { ArticleData } from '@/utils/interface';
import { useSubsetStore } from '@/stores/subset';
import { moment } from '@/utils/moment';
import { baseImgPath } from '@/utils/env';
import { useRouter } from 'vue-router';
import { highlightKeywords } from '@/utils/highlight';
const router = useRouter();
// store
const subsetStore = useSubsetStore();
type ArticleItemProps = {
  data?: ArticleData,
  serchTerm?: string,
}


const props = withDefaults(defineProps<ArticleItemProps>(), {
})
const emits = defineEmits(['delete', 'state']);
// 封面地址
const cover = computed(() => {
  return baseImgPath + '/' + props.data?.cover
})
// 删除文章
const deleteArticle = () => {
  emits('delete', props.data?.id);
}

// 修改文章状态
const updateState = (e: number) => {
  emits('state', { id: props.data?.id, state: e });
}

// 修改文章
const updateArticle = () => {
  // 跳转到编辑页面
  router.push({
    path: '/editarticle',
    query: {
      id: props.data?.id
    }
  })
}


// 高亮标题和简介
const introduce = ref(props.data?.introduce)
const title = ref(props.data!.title)
const highLight = (key?: string) => {
  if (props.data?.introduce) {
    introduce.value = highlightKeywords(props.data?.introduce, key)
  }
  title.value = highlightKeywords(props.data!.title, key)
}
watch(
  () => props.serchTerm,
  (e: any) => {
    highLight(e)
  }
)
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #3a7bd5;
@primary-light: rgba(58, 123, 213, 0.08);
@text-color: #2c3e50;
@text-secondary: #5e6c84;
@text-muted: #8492a6;
@bg-color: #ffffff;
@bg-light: #f9fafc;
@border-color: #edf0f5;
@shadow-color: rgba(0, 0, 0, 0.05);
@transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

// 文章项卡片
.article-item {
  border-radius: 14px;
  background: @bg-color;
  padding: 20px 24px;
  width: 100%;
  box-shadow: 0 3px 15px @shadow-color;
  transition: @transition;
  position: relative;
  border: 1px solid rgba(237, 240, 245, 0.6);
  overflow: hidden;

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);

    .article-item__cover img {
      transform: scale(1.04);
    }
  }

  // 封面图容器
  &__cover {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    width: 160px;
    height: 120px;
    flex: none;
    box-shadow: 0 4px 12px @shadow-color;

    img {
      transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      object-fit: cover;
    }

    // 未发布标签
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, transparent 50%, rgba(43, 90, 237, 0.9) 50%);
      z-index: 2;
    }
  }

  // 未发布标签
  &__unpublish {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, rgba(43, 90, 237, 0.8), rgba(73, 125, 255, 0.9));
    line-height: 32px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(2px);
    box-shadow: 0 -2px 10px rgba(43, 90, 237, 0.2);
    z-index: 1;
  }

  // 标题
  &__title {
    font-size: 19px;
    font-weight: 600;
    padding-bottom: 10px;
    color: @text-color;
    line-height: 1.4;
    margin: 0;
    transition: @transition;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    :deep(em) {
      color: @primary-color;
      font-style: normal;
      padding: 0 2px;
      position: relative;
      background-color: rgba(58, 123, 213, 0.1);
      border-radius: 3px;
    }
  }

  // 简介
  &__introduce {
    font-size: 15px;
    line-height: 1.6;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    color: @text-secondary;
    margin: 0 0 14px 0;

    :deep(em) {
      color: @primary-color;
      font-style: normal;
      font-weight: 500;
      padding: 0 2px;
      position: relative;
      background-color: rgba(58, 123, 213, 0.1);
      border-radius: 3px;
    }
  }

  // 数据区域
  &__datas {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;

    // 分隔线
    &::before {
      content: '';
      position: absolute;
      top: -7px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right,
          @border-color 0%,
          @border-color 70%,
          transparent 100%);
    }

    // 统计数据样式
    :deep(.yk-text) {
      &[type="secondary"] {
        color: @text-secondary;
        font-size: 14px;

        span {
          display: inline-block;
          position: relative;

          &:not(:last-child)::after {
            content: ',';
          }
        }
      }

      &[type="third"] {
        color: @text-muted;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .yk-icon {
        width: 16px;
        height: 16px;
        color: @text-muted;
        opacity: 0.85;
      }
    }
  }

  // 控制按钮区域
  &__control {
    .yk-icon {
      width: 18px;
      height: 18px;
      color: @text-muted;
      cursor: pointer;
      padding: 3px;
      border-radius: 50%;
      transition: @transition;

      &:hover {
        color: @primary-color;
        background-color: @primary-light;
        transform: scale(1.15);
      }
    }
  }
}

// 响应式样式
@media (min-width: 1200px) {
  .article-item {
    padding: 24px 28px;

    &__title {
      font-size: 20px;
    }
  }
}

@media (max-width: 992px) {
  .article-item {
    padding: 18px 20px;

    &__title {
      font-size: 18px;
      padding-bottom: 8px;
    }

    &__introduce {
      font-size: 14px;
      margin-bottom: 12px;
    }

    &__datas::before {
      top: -6px;
    }
  }
}

@media (max-width: 768px) {
  .article-item {
    border-radius: 12px;
    padding: 16px;

    :deep(.yk-space) {
      flex-wrap: wrap !important;
    }

    &__cover {
      width: 120px;
      height: 90px;
      border-radius: 8px;
    }

    &__title {
      font-size: 17px;
      padding-bottom: 6px;
    }

    &__introduce {
      margin-bottom: 10px;
      height: 44px;
      -webkit-line-clamp: 2;
    }

    &__datas {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;

      :deep(.yk-space) {
        width: 100%;
        justify-content: space-between !important;
      }
    }

    &__control {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding-top: 4px;
    }
  }
}

@media (max-width: 576px) {
  .article-item {
    border-radius: 10px;
    padding: 14px;

    :deep(.yk-space) {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    &__cover {
      width: 100%;
      height: 160px;
      margin-bottom: 14px;

      img {
        width: 100% !important;
        height: 160px !important;
      }
    }

    &__title {
      font-size: 16px;
      padding-bottom: 6px;
      -webkit-line-clamp: 2;
      height: auto;
      max-height: 44px;
    }

    &__introduce {
      font-size: 14px;
    }

    &__datas {
      :deep(.yk-space-item) {
        margin-right: 0 !important;
      }

      // 简化数据显示
      :deep(.yk-text[type="third"]) {
        font-size: 12px;
      }
    }

    // 优化控制按钮在移动端的显示
    &__control {
      padding-top: 6px;

      .yk-icon {
        width: 20px;
        height: 20px;
        padding: 4px;
      }
    }
  }
}

@media (max-width: 480px) {
  .article-item {
    padding: 12px;

    &__cover {
      height: 140px;
      margin-bottom: 12px;

      img {
        height: 140px !important;
      }
    }

    &__introduce {
      font-size: 13px;
      margin-bottom: 8px;
      height: 40px;
    }

    &__datas {
      gap: 6px;

      :deep(.yk-space) {
        flex-wrap: wrap !important;
        gap: 6px 10px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
